<template>
  <view>
    <view class="apply-one">
      <view class="one-left">
        <uni-data-select
          placeholder="单据状态"
          v-model="orderForm.statusOne"
          :localdata="statusArrOne"
          @change="changeStatusOne"
        ></uni-data-select>
      </view>
      <view class="one-left">
        <uni-data-select
         placeholder="单据状态"
          v-model="orderForm.statusTwo"
          :localdata="statusArrTwo"
          @change="changeStatusTwo"
        ></uni-data-select>
      </view>
    </view>
    <view class="apply-one">
      <view style="width: 45%;">
        <uni-datetime-picker 
          v-model="orderForm.createDate" 
          type="daterange" 
          @change="changeDate"/>
      </view>
      <view style="width: 55%;">
        <uni-search-bar v-model="orderForm.storageCode" class="uni-mt-10" radius="5" placeholder="单号|部门|申请人|用途" clearButton="auto" cancelButton="none" @input="input" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
  
const orderForm = ref({
  statusOne: 0,
  orderStatusTwo: 0,
  createDate: [],
  storageCode: ''
})  
/* 状态 */ 
// const orderStatusOne = ref(0)
const statusArrOne = ref([
  { value: 0, text: "待处理" },
  { value: 1, text: "已处理" },
  { value: 2, text: "对接失败" },
])
// const orderStatusTwo = ref(0)
const statusArrTwo = ref([
  { value: 0, text: "全部" },
  { value: 1, text: "审核中" },
  { value: 2, text: "已通过" },
  { value: 2, text: "已驳回" }
])
const emits = defineEmits(['search'])

const changeStatusOne = (e) =>{
  emits('search',orderForm.value)
}
const changeStatusTwo = (e) =>{
  emits('search',orderForm.value)
}
/* 搜索 */ 
const searchValue = ref('')
const search = (res)=>{
  uni.showToast({
    title: '搜索：' + res.value,
    icon: 'none'
  })
}
const input = (res)=>{
  console.log('rrrr',res);
  orderForm.value.storageCode = res
  emits('search',orderForm.value)
}

/* 日期选择 */ 
const changeDate = (e)=>{
  console.log(e);
 
  emits('search',orderForm.value)
}
</script>

<style lang="scss">
.apply-one {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 5px;
  .one-left {
    width: 50%;
  }
  .one-right {
    width: 75%;
  }
}
</style>